<template>
  <div class="nav_outer">
    <Header>服务站点</Header>
    <div class="banner" style="height:5.5rem;overflow:hidden;">
      <img :src="detail.photo | imgpre" style="width:100%;" />
    </div>
    <div class="content">
        <div class="base_info">
            <h4>{{detail.name}}</h4>
            <p class="base_tags">
                <span>{{detail.enrollmentPosition}}</span>
            </p>
            <!-- <p>联系方式: 王先生 18896731226</p> -->
            <div class="location flex_auto">
                <p>地址: {{detail.address}}<img src="../assets/img/locate.png" alt="" style="width:.8em;margin-left:.5em;vertical-align:middle;"></p>
                
            </div>
        </div>
        <div class="locationdes">
            <h5>门店简介</h5>
            <div class="block">
                <!-- <p class="block_title">宣传服务</p> -->
                <p>{{detail.summary}}</p>
            </div>
            <div class="block">
                <!-- <p class="block_title">新闻资讯服务</p> -->
                <p>{{detail.factoryNames}}</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import BottomTab from '@/components/commonComponents/BottomTab'
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      detail:{}
    }
  },
  mounted() {
    let mui = this.mui;
  },
  created(){
    let id = this.$route.query.id;
    this.loadDetail(id);
  },
  methods: {
    loadDetail:function(id){
      let that = this;
      that.Http2.get(`/mobile/store/${id}`, null).then(
        res => {
            this.detail = res;
        }
      );
    }
  },
  components: {
    BottomTab,
    Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .mui-slider-group{
    height: px2em(340);
    background: #ccc;
  }
  .mui-slider-item{
    background: #ccc;
  }
  .content{
      background: #fff;
      padding: px2em(30);
      .base_tags{
          margin-top: px2em(34);
      }
      .base_tags>span{
          display: inline-block;
          padding: 0 10px;
          height: px2em(40);
          line-height: px2em(40);
          border-radius: px2em(20);
          border: 1px solid #00AFFF;
          font-size: 0.9em;
          margin-right: 5px;
      }
      .location{
          font-size: 0.9em;
          align-items: flex-start;
      }
      .locationdes{
          >h5{
              font-weight: bold;
              color: #4D4E4A;
              border-left: 5px solid #4787EB;
              padding: 2px 5px;
              font-size: 1.1em;
              margin-bottom: px2em(30);
          }
          .block_title{
              margin-bottom: 5px;
              font-weight: bold;
              color: #4D4E4A;
          }
      }
  }
</style>